<template>
  <div>
    <h1>洋洋的天下</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  /* 
    在vue2中当中this.$route (路由)  this.$route.query   this.$router.params获取
    this.$router  路由器
    
    */
  setup() {
    //由于在setup当中没有this  通过this.route不能访问
    const route = useRoute();
    console.log(route);
    console.log(route.query.id);
    // console.log(route.query.value.id);//报错
    const router = useRouter();
    console.log(router);
    // 获取到router之后能操作哪些？ 编程式路由导航  路由守卫
    /* 
    可以前后进行跳转
    push
    replace

    push({name或者path}) 可以进行路径跳转

    back  返回上一个路由
    forward   去下一个路由
    go 正数  负数   正数是跳转到下一个 第几个路由   负数回退路由
    
    路由守卫
    全局守卫  前置守卫  后置守卫
    组件守卫 beforeRouteEnter(在setup当中不能使用)  update  leave   setup当中beforeRouteLeave
    路由独享的守卫 beforeEnter
    
    */
    return {};
  },
  mounted() {
    console.log(this.$route);
  },
});
</script>

<style scoped>
</style>